<!-- 通知 -->
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { GetNotice } from '@/api/course'
const router = useRouter()
const tableData = ref([])
import { useExamStore } from '@/stores/index'
const examStore = useExamStore()

const createNotice = () => {
  router.push('/spendNotice')
}
//将数据从本地拿出来
const notice = localStorage.getItem('noticeData')
console.log(notice)
// console.log(tableData.classId)
onMounted(() => {
  GetNotice(notice).then((res) => {
    console.log(res)
    tableData.value = res.data
    examStore.examList = res.data
  })
})

//删除
const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}
</script>

<template>
  <el-card class="my-chapter">
    <div class="header">
      <span>我的通知</span>
      <el-button type="primary" class="add-btn" @click="createNotice">新建</el-button>
    </div>

    <el-table class="notice-table" :data="tableData">
      <el-table-column prop="classId" label="classId" width="200" />
      <el-table-column prop="netAdress" label="netAdress" width="200" />
      <el-table-column prop="teacherId" label="teacherId" width="200" />

      <el-table-column prop="title" label="title" width="200" />

      <el-table-column>
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.my-chapter {
  margin-top: 6.25rem;

  // 头部
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    height: 3.75rem;
    border-bottom: 1px solid #e2e2e2;
  }

  // 通知
  .notice-table {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
}
</style>
